<template>
  <div>
    <el-dropdown ref="dropdownRef">
      <span class="el-dropdown-link con">
        {{ displayTitle }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <template v-if="menuConfig">
            <el-dropdown-item 
              v-for="option in menuConfig.options" 
              :key="option"
              :class="{ 'selected-option': selectedOption === option && option !== '自定义' }"
              @click="handleSelect(option)"
            >
              {{ option }}
              <el-icon v-if="selectedOption === option && option !== '自定义'" class="ml-2">
                <check />
              </el-icon>
            </el-dropdown-item>
            
            <div v-if="selectedOption === '自定义'" class="custom-date-picker">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleDateRangeChange"
                @open="dropdownRef.value?.show()"
                @close="handleDatePickerClose"
              />
            </div>
          </template>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ArrowDown, Check } from '@element-plus/icons-vue'
import { computed, ref, watch } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '筛选'
  }
})

const emit = defineEmits(['condition-change'])

const selectedOption = ref('')
const dateRange = ref(null)
const customDateText = ref('')
const dropdownRef = ref(null)

// 下拉菜单配置
const menuConfig = computed(() => {
  const title = props.title
  if (title.includes('时间降序') || title.includes('筛选')) {
    return { options: ['时间升序', '时间降序'] }
  }
  if (title.includes('时间范围')) {
    return { options: ['全部时间', '本周', '自定义'] }
  }
  if (title.includes('添加方式')) {
    return { options: ['全部方式', '手动添加', '批量导入', '自动抓取'] }
  }
  if (title.includes('发布状态')) {
    return { options: ['全部状态', '已发布', '草稿'] }
  }
  return null
})

const displayTitle = computed(() => {
  return selectedOption.value === '自定义' && customDateText.value 
    ? customDateText.value 
    : selectedOption.value || props.title || '筛选'
})

const handleSelect = (option) => {
  selectedOption.value = option
  
  if (option !== '自定义') {
    dateRange.value = null
    customDateText.value = ''
  }
  
  // 发出条件变化事件
  emit('condition-change', option)
}

const handleDateRangeChange = (value) => {
  if (value?.length === 2) {
    const [start, end] = value.map(d => d.toISOString().split('T')[0])
    customDateText.value = `${start} 至 ${end}`
    // 发出条件变化事件，传递自定义日期范围
    emit('condition-change', customDateText.value)
  } else {
    customDateText.value = ''
    // 发出条件变化事件，清除日期范围
    emit('condition-change', '')
  }
}

const handleDatePickerClose = () => {
  // 日期选择器关闭时的处理
  // 确保下拉菜单也关闭
  if (dropdownRef.value) {
    dropdownRef.value.hide()
  }
}
</script>

<style scoped>
.con {
  margin-left: 20px;
}

.selected-option {
  background-color: #ecf5ff !important;
  color: #409eff;
}

.ml-2 {
  margin-left: 8px;
}

.el-dropdown-link {
  display: inline-block;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.el-dropdown-link:hover {
  color: #409eff;
}

.custom-date-picker {
  padding: 10px 15px;
  text-align: center;
}

:deep(.el-date-editor) {
  width: 100%;
}
</style>